<template>
  <div>
    <mark
      style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
      v-show="showSeason"
      @click.stop="showSeason=false"
    ></mark>
    <el-input
      placeholder="请选择季度"
      v-model="showValue"
      @focus="showSeason=true"
      @clear="handleClear"
      clearable
    >
    </el-input>
    <el-card
      class="box-card"
      style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
      v-show="showSeason"
    >
      <template #header>
        <div class="clearfix" style="text-align:center;padding:0">
          <button
            type="button"
            aria-label="前一年"
            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
            @click="prev"
          ></button>
          <span role="button" class="el-date-picker__header-label">{{year}}年</span>
          <button
            type="button"
            aria-label="后一年"
            @click="next"
            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
          ></button>
        </div>
      </template>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason(0)"
        >第一季度</el-button>
        <el-button
          type="text"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(1)"
        >第二季度</el-button>
        <div class="text item" style="text-align:center;">
          <el-button
            type="text"
            style="width:40%;color: #606266;float:left;"
            @click="selectSeason(2)"
          >第三季度</el-button>
          <el-button
            type="text"
            style="float:right;width:40%;color: #606266;"
            @click="selectSeason(3)"
          >第四季度</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>


<script setup>
import {ref, watch} from 'vue'

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  valueArr: {
    default: () => {
      return ['01', '02', '03', '04']
    },
    type: Array
  },
  showText: Boolean
});

const showSeason = ref(false);
const season = ref(null);
const year = ref(new Date().getFullYear());
const showValue = ref('');
const curValue = ref('');
const selectedValue = ref('');

const init = () => {
  if (props.modelValue) {
    let value = props.modelValue + "";
    year.value = parseInt(value.slice(0, 4));
    let str = value.slice(4, 6);
    let arrAll = props.valueArr
    let season = arrAll.indexOf(str) + 1;
    let tempValue = "";

    if (season === 1) {
      tempValue = "01";
      showValue.value = `${year.value}年第一季度`
    } else if (season === 2) {
      tempValue = "02";
      showValue.value = `${year.value}年第二季度`
    } else if (season === 3) {
      tempValue = "03";
      showValue.value = `${year.value}年第三季度`
    } else if (season === 4) {
      tempValue = "04";
      showValue.value = `${year.value}年第四季度`
    }

    curValue.value = year.value + tempValue;
    emit('update:modelValue',  curValue.value);
  }
};

const prev = () => {
  year.value = year.value - 1
};

const next = () => {
  year.value = year.value + 1
};

const selectSeason = (i) => {
  season.value = i + 1
  showSeason.value = false

  let value = "";
  let valueName = "";
  if (season.value === 1) {
    value = "01";
    valueName = `${year.value}年第一季度`;
  } else if (season.value === 2) {
    value = "02";
    valueName = `${year.value}年第二季度`
  } else if (season.value === 3) {
    value = "03";
    valueName = `${year.value}年第三季度`
  } else if (season.value === 4) {
    value = "04";
    valueName = `${year.value}年第四季度`
  }

  curValue.value = year.value + value;
  selectedValue.value = curValue.value + '';
  showValue.value = valueName;
  handleChange();
};

const handleClear = () => {
  selectedValue.value = '';
  emit('update:modelValue', selectedValue.value);
  emit('change');
};

const handleChange = () => {
  emit('update:modelValue', selectedValue.value);
  emit('change');
};

init();

watch(() => props.modelValue, (newVal) => {
  if ((newVal || '') === '') {
    selectedValue.value = '';
    return;
  }

  let arr = newVal + "";
  year.value = parseInt(arr.slice(0, 4));
  let str = newVal.slice(4, 6);

  let arrAll = props.valueArr
  let season = arrAll.indexOf(str) + 1;
  let tempValue = "";
  if (season === 1) {
    tempValue = "01";
    showValue.value = `${year.value}年第一季度`
  } else if (season === 2) {
    tempValue = "02";
    showValue.value = `${year.value}年第二季度`
  } else if (season === 3) {
    tempValue = "03";
    showValue.value = `${year.value}年第三季度`
  } else if (season === 4) {
    tempValue = "04";
    showValue.value = `${year.value}年第四季度`
  }

  curValue.value = year.value + tempValue;
  selectedValue.value = curValue.value + '';
});
</script>
